<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            font-size: 20px;
        }

        img {
            display: block;
        }

        .download {
            margin-left: 20px;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #ccc;
            border: 1px solid #333;
            padding: 4px 20px;
            overflow: hidden;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            border-radius: 20px;
            color: #333;
            font-size: 13px;
            margin-top: 20px;

        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .appDetails {
            display: inline;
        }

        .upload {
            margin-top: 10px;
        }

        .appDescribe {
            color: green;
        }

        #msg {
            font-size: 12px;
        }

        .ios {
            border: 2px solid darkseagreen;
            margin: 10px 10px 0;
            padding: 10px;
            width: 40%;
            float: left;
        }

        .android {
            border: 2px solid darkseagreen;
            margin: 10px 10px 0 0;
            padding: 10px;
            width: 45%;
            float: right;
        }

        .appInfo {
            border: 2px solid darkseagreen;
            margin: 10px 10px 0;
            width: 35%;
            padding: 10px;
        }

        .appImage {
            width: 50px;
            height: auto;
        }

    </style>
</head>
<body>

<div>
    <h5>财富APP下载(二维码演示)</h5>
    <div>
        <img src="static/image/QRCode.png" alt="">
        <a href="https://10.49.33.241:8443/ca/myCA.cer">iOS证书下载(根证书（局域网需要,用来支持https）)</a>
        <a href="itms-services://?action=download-manifest&url=https://10.49.33.241:8443/filedownload/CedarFinancialPlanner.plist">iOS安装</a>
        <a class="download" href="http://demo.tianhengming.shop/file/apk/app_v3_0227.apk">Android安装</a>
    </div>
</div>


<div>

    <div class="appInfo">
        <a href="javascript:;" class="file gradient">选择应用
            　 <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected()">
        </a>

        <!--文件详情-->
        <div id="fileFrame"></div>
        <div>
            <p class="appDetails">应用名称: </p>
            <p class="appDetails appDescribe" id="fileName"></p>
        </div>

        <div>
            <p class="appDetails">应用大小: </p>
            <p class="appDetails appDescribe" id="fileSize"></p>
        </div>
        <div>
            <button class="upload" onclick="newFileUpload()">上传</button>
        </div>
    </div>


    <div id="msg" style="max-height: 400px; overflow:auto;min-height: 50px;color: red;float: outside">

    </div>


    <!--应用上传后后台进行解析-->
    <div class="ios">
        <div style="align-content: center;text-align: center ;color: orange; ">iOS应用</div>
        <div>
            <img class="appImage" id="iOSIcon">
        </div>
        <div>
            <p class="appDetails">应用名: </p>
            <p class="appDetails appDescribe" id="appName"></p>

        </div>

        <div>
            <p class="appDetails">版本号: </p>
            <p class="appDetails appDescribe" id="version"></p>
        </div>

        <div>
            <p class="appDetails">bundleID: </p>
            <p class="appDetails appDescribe" id="bundleID"></p>
        </div>

        <div>
            <p class="appDetails">团队team: </p>
            <p class="appDetails appDescribe" id="team"></p>
        </div>

        <div>
            <p class="appDetails">下载地址: </p>
            <a class="appDetails appDescribe" id="iOSDownload"> </a>
        </div>
    </div>

    <div class="android">
        <div style="align-content: center;text-align: center ;color: orange; ">android应用</div>
        <div>
            <img class="appImage" id="androidIcon">
        </div>
        <div>
            <p class="appDetails">应用名: </p>
            <p class="appDetails appDescribe" id="androidAppName"></p>
        </div>

        <div>
            <p class="appDetails">版本号: </p>
            <p class="appDetails appDescribe" id="androidVersion"></p>
        </div>

        <div>
            <p class="appDetails">bundleID: </p>
            <p class="appDetails appDescribe" id="androidBundleID"></p>
        </div>
        <div>
            <p class="appDetails">其它: </p>
            <p class="appDetails appDescribe" id="androidTeam"></p>
        </div>
        <div>
            <p class="appDetails">下载地址: </p>
            <a class="appDetails appDescribe" id="androidDownload">
            </a>
        </div>
    </div>

    <!--<button onclick="testData()">测试ajax数据</button>-->

</div>


<script src="static/js/jquery-3.3.1.js"></script>


<script>

    var fileUrl;

    $(document).ready(function () {

//        $("a[id='androidDownload']").click(function(){
//            window.location.href = fileUrl;
//        });
    });

    function newFileUpload() {

        var fileObj = document.getElementById("fileToUpload").files[0]; // js 获取文件对象
        if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
            alert("请选择应用");
            return;
        }

        var formFile = new FormData();
        formFile.append("file", fileObj); //加入文件对象
        formFile.append("fileName", encodeURIComponent(fileObj.name));
        formFile.append("fileSize", fileObj.size);

        var xhr = new XMLHttpRequest();
        xhr.open("post", "/appupload?fileName=" + encodeURIComponent(fileObj.name) + "&fileSize=" + fileObj.size, true);
        xhr.onload = function () {
            // $("#msg").html("上传完成!");
        };

        xhr.onreadystatechange = function () {//服务器返回值的处理函数，此处使用匿名函数进行实现
            console.log("readyState: " + xhr.readyState + "status: " + xhr.status);
            if (xhr.readyState == 4 && xhr.status == 200) {//
                var responseText = xhr.responseText;
                $("#msg").html("JSON: " + responseText);
                var obj = JSON.parse(responseText);
                if (obj.appType == 1) {//iOS
                    $("#appName").html(obj.appName);
                    $("#version").html(obj.version + " (build: " + obj.buildNumber + ")");
                    $("#bundleID").html(obj.bundleIdentifier);
                    $("#team").html(obj.teamName);
                    $("#iOSDownload").html(obj.plistPath);
                    $("#iOSDownload").attr("href", obj.plistPath);

                } else if (obj.appType == 2) {//android
                    $("#androidAppName").html(obj.appName);
                    $("#androidVersion").html(obj.version + " (build: " + obj.buildNumber + ")");
                    $("#androidBundleID").html(obj.bundleIdentifier);
                    $("#androidTeam").html(obj.teamName);

                    $("#androidDownload").html(obj.fileUrl);
                    $("#androidDownload").attr("href", obj.iconUrl);
                    fileUrl = obj.fileUrl;
                    $("#androidIcon").attr('src', obj.iconUrl);
                }
            }
        };


        xhr.send(formFile);

        // return;
        // var data = formFile;
        //
        // $.ajax({
        //     url:"/fileupload",
        //     data:data,
        //     type:"post",
        //     cache:false,
        //     dataType: "json",
        //     processData:false, //必须写
        //     contentType:false, //必须写
        //     success:function(data){
        //         alert("上传完成!");
        //     }
        // })
    }


    /**
     * 选择文件之后触发事件,可以获取一些文件信息
     */
    function fileSelected() {
        fileList = document.getElementById('fileToUpload');
        var length = fileList.files.length;
        var frame = document.getElementById('fileFrame');
        //先移除子元素
        var childs = frame.childNodes;
        for (var i = 0; i < childs.length; i++) {
            frame.removeChild(childs[i]);
        }
        for (var i = 0; i < length; i++) {
            var file = fileList.files[i];
            if (file) {
                var fileSize = file.size;
                if (file.size > 1024 * 1024) {
                    //    fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
                } else {
                    // fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
                }
                var appName = document.getElementById("fileName");
                appName.innerHTML = file.name;
                $("#fileSize").html(fileSize);
            }
        }
    }


    function testData() {
        var data = "{\"appName\":\"松果财富顾问版\", \"version\":\"1.8.09\", \"buildNumber\":\"16\",\"bundleIdentifier\":\"com.cedarhd.financialplanner\",\"appType\":\"1\"}"; //json字符串

        var obj = JSON.parse(data);

        if (obj.appType == 1) {
            alert(obj.appType);
        }


        $("#appName").html(obj.appName);
        /*  $.ajax({
              type: "get",
              url: "fileupload",
              data: null,
              dataType: "json",
              success: function (data) {
                  console.log(data);
              }
          });*/
    }


</script>

<script>

</script>

</body>
</html>